<!DOCTYPE HTML>
<HTML>
	<HEAD>
		<META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE" />
		<META HTTP-EQUIV="PRAGMA" CONTENT="NO-CACHE" />
		<META HTTP-EQUIV="EXPIRES" CONTENT="0" />
		<META HTTP-EQUIV="CONTENT-TYPE" CONTENT="text/html; charset=UTF-8" />
		<META HTTP-EQUIV="CONTENT-LANGUAGE" CONTENT="en,de" />
		<META NAME="ROBOTS" CONTENT="INDEX,NOFOLLOW" />
		<META NAME="AUTHOR" CONTENT="Andreas Kasch" />
		<META NAME="COPYRIGHT" CONTENT="&copy; 2013 Andreas Kasch" />
		<META NAME="DESCRIPTION" CONTENT="HTML5 Rendering Methods Evaluation" />
		<META NAME="KEYWORDS" CONTENT="HTML5, Rendering" />
		
		<TITLE>HTML5 Rendering Methods Evaluation - 2D Canvas Rendering with off-screen canvas</TITLE>
		
		<SCRIPT TYPE="text/javascript" CHARSET="utf-8" SRC="jquery-1.9.1.min.js"></SCRIPT>
		<SCRIPT TYPE="text/javascript" CHARSET="utf-8" SRC="timer.js"></SCRIPT>
		<SCRIPT TYPE="text/javascript" CHARSET="utf-8" SRC="model.js"></SCRIPT>
		<STYLE TYPE="text/css">
			#area{
				width: 1250px;
				height: 800px;
				margin: 10px;
				padding: 0;
				box-shadow: 0 0 9px 1px #000;
			}
		</STYLE>
	</HEAD>
	<BODY>
		<h1>2D Canvas Rendering with off-screen canvas</h1>
		<p>
			<input type="button" value="1 Entit&auml;t" onclick="start(1,1)"/>
			<input type="button" value="100 Entit&auml;ten" onclick="start(10,10)"/>
			<input type="button" value="1250 Entit&auml;ten" onclick="start(50,25)"/>
			<input id="start" type="button" value="Start"/>
			<span id="debug"></span>
		</p>
		<div id="area">
		
		</div>
		<p><a href="index.html">Zur&uuml;ck</a></p>
		<script type="text/javascript">
			$("#start").click(function(){
				start(50,25);
			});
			
			var start = function(x, y){
				var m = new Model(x, y);
				
				var img;
				var ctx;
				var offcvs;
				var offctx;
				
				var setup = function(cb){
					$("#area").html("");
					img = {};
					$("#area").append("<canvas id=\"canvas\" width=\"1250\" height=\"800\"></canvas>");
					var canvas = document.getElementById('canvas');
					canvas.width = 1250;
					canvas.height = 800;
					ctx = canvas.getContext('2d');
					
					offcvs = document.createElement('canvas');
					offcvs.width = 1250;
					offcvs.height = 800;
					offctx = offcvs.getContext('2d');
				
					var imgs = FRAMES;
				
					loadImages(imgs, 0, function(){
						for(var i in m){
							var src = m[i].frames[m[i].current];
							offctx.drawImage(img[src], m[i].x, m[i].y);
						}
						ctx.drawImage(offcvs, 0, 0);
						cb();
					});
				};
				
				var loadImages = function(images, i, cb){
					if(i < images.length){
						var src = images[i];
						img[src] = new Image();
						img[src].onload = function(){
							loadImages(images, i+1, cb);
						};
						img[src].src = src;
					} else {
						cb();
					}
				};
				
				var draw = function(cb){
					ctx.clearRect(0,0,1250,800);
					offctx.clearRect(0,0,1250,800);
					for(var i in m){
						m[i].current = (m[i].current+1)%m[i].frames.length;
						var src = m[i].frames[m[i].current];
						offctx.drawImage(img[src], m[i].x, m[i].y);
					}
					ctx.drawImage(offcvs, 0, 0);
					setTimeout(cb,1);
				};
				
				var done = function(time, fps){
					$("#debug").html("Zeit: " + time/1000. + " Sekunden, FPS: " + fps);
				};
				
				var t = new Timer(setup, draw, done);
				
				t.run();
			};
		</script>
	</BODY>
</HTML>